<script setup>
import { onShow } from '@dcloudio/uni-app'
import { ref } from 'vue'
import { fixCoverImageUrl } from '@/utils/fixImageUrls'
import { getPlayStrategyList } from '@/api/play'

const playStrategyList = ref([])
// 获取游玩攻略列表
async function onGetPlayStrategyList() {
  const { result } = await getPlayStrategyList()
  playStrategyList.value = result.map(item => ({ ...item, url: fixCoverImageUrl(item.cover) }))
}

function goDetail(id) {
  uni.navigateTo({ url: `/pages/play/view/play-strategy-detail?id=${id}` })
}

onShow(() => {
  onGetPlayStrategyList()
})
</script>

<template>
  <view class="bg-[#F5F5F5] pb-safe min-h-safe">
    <nut-navbar title="游玩攻略" custom-color="#000" left-show placeholder fixed />
    <main class="px-2 mt-2 flex flex-col">
      <view
        v-for="item in playStrategyList"
        :key="item.id"
        class="mb-2 bg-white rounded-xl shadow overflow-hidden"
        @click="goDetail(item.id)"
      >
        <image class="block h-280 w-full" :src="item.url" mode="aspectFill" />
        <view class="py-2.5 flex justify-between">
          <p class="px-1.5 text-28 text-black font-semibold">
            {{ item.title }}
          </p>
          <view class="px-1.5 text-[#666] center">
            <view class="i-ant-design:heart-outlined" />
            <view class="pl-0.5 text-20">
              {{ item.xihuan }}
            </view>
          </view>
        </view>
      </view>
    </main>
  </view>
</template>
